<template>
  <div class="page">
        <el-container>
            <el-aside  :class="collapse ? 'page-aside shou':'page-aside'  ">
                <Slide/>
            </el-aside>
            <el-container>
                <el-header class="page-header">
                    <div style="display:flex; align-items:center;">
                        <el-button type="primary" size="mini" v-if="!collapse" @click="TOGGLE" ><i class="el-icon-s-fold"></i></el-button>
                        <el-button type="primary" size="mini" v-else @click="TOGGLE"><i class="el-icon-s-unfold"></i></el-button>
                        &nbsp;&nbsp;&nbsp;
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
                        </el-breadcrumb>
                        &nbsp;&nbsp;&nbsp;
                        <el-button icon="el-icon-back" circle size="mini" @click="$router.back()"></el-button>
                    </div>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span @click="fullToggle"> <i class="el-icon-full-screen"></i> 全屏操作</span></el-dropdown-item>
                            <el-dropdown-item> <i class="el-icon-user"></i> 个人信息</el-dropdown-item>
                            <el-dropdown-item><span @click="QUIT"><i class="el-icon-switch-button"></i> 退出登录</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main class="page-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
  </div>
</template>

<script>
import Slide from "@/components/Slide"
import { mapState,mapMutations,mapGetters } from "vuex"
export default {
    data(){
        return{}
    },
     computed:{
      ...mapState(['collapse']),
      ...mapGetters(['username'])
    },
    components:{
        Slide
    },
    methods:{
        ...mapMutations(['TOGGLE','QUIT']),
        fullToggle(){
            this.$root.$emit("fullscreentoggle")
        }
    }
}

</script>
<style>
.page{
    width: 100vw;
    height:100vh;
}
.page-header{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    z-index: 1000;
}
.page-main{
    background-color: #f6f6f6;
    overflow-y: scroll;
    height: calc(100vh - 60px);
}
.page-aside{
    width: 230px!important;
    transition: all .2s linear;
}
.page-aside.shou{
    width: 64px!important;
}
.table-box{
    background-color: #fff;
    margin-top: 15px;
    padding: 15px;
}
.el-table__empty-text{
    height: 170px;
    line-height: 270px;
    font-size: 13px;
    background: url(../assets/img/iconNoting.png) no-repeat center 25px;
}
.bgf{
    background-color: #fff;
    padding: 15px;
    margin-top: 15px;
}
</style>

